<template>
  <div class="map" id="map">map</div>
</template>
<script>
import axios from "axios"; // 1.引用

import { onMounted, reactive, inject } from "vue";
export default {
  setup() {
    // 2.得到echarts
    let $echarts = inject("echarts");
    let mapData = reactive({});
    async function getState() {
      mapData = await axios.get("http://localhost:8080/map/china.json");
      
    }
    onMounted(() => {
      getState().then(() => {
        console.log("map", mapData);
        // 3.设置地图
        $echarts.registerMap("china", mapData.data);
        var chart = $echarts.init(document.getElementById("map"));
        chart.setOption({
          geo: {
            map: "china",
            itemStyle: {
              areaColor: "rgba(0, 0, 255, 0.2)", //地图区域的颜色。
              borderColor: "#00ffff", //图形的描边颜色。
              shadowColor: "rgba(230,130, 70, 0.5)", //橙色
              shadowBlur: 30,
            },
          },
        });
      });
    });
    return { mapData };
  },
};
</script>
<style lang="less">
div {
  .map {
    width: 100%;
    height: 100%;
  }
}
</style>

